<template>
	<table class="result-table">
		<tr>
			<th>玩家</th>
			<th>词语</th>
			<th>身份</th>
			<th>状态</th>
		</tr>
		<tr v-for="r in role.result.roles" :class="{ winner: r.win }">
			<td>{{ r.playerName }}</td>
			<td>{{ r.word }}</td>
			<td :class="r.type">{{ common.roleLabel[r.type] }}</td>
			<td>{{ r.dead ? '出局' : '存活' }}</td>
		</tr>
	</table>
</template>

<script>
	import common from './../common';

	export default {
		name: 'result',
		props: {
			role: Object,
		},
		data() {
		    return {
                common,
			}
		}
	}
</script>

<style lang="less" scoped>
	.result-table {
		width: 90%;
		padding: 5%;
		border: 1px solid gray;
		border-collapse: collapse;
		td {
			border: 1px solid gray;
		}
		.winner {
			background-color: lightgreen;
			color: blue;
		}
		.normal {
			color: darkslategray;
		}
		.undercover {
			color: darkred;
		}
		.whiteboard {
			color: darkslateblue;
		}
	}
</style>
